<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			
			body{
				perspective: 500px;
				/* background-image: url(img/1.png); */
				background-repeat: no-repeat;
				-webkit-background-size:cover;
				background-size:cover;
			}
			
			.box{
				width:200px;
				margin: 200px auto;
				position: relative;
				transform-style: preserve-3d;
				transform: rotateX(-30deg) rotateY(30deg);
				animation: b 30s infinite;
			}
			
			@keyframes b{
				100%{transform: rotateX(-30deg) rotateY(720deg);}
			}
			
			.box:hover .up{
				transform: rotateX(90deg) translateZ(200px);
			}
			
			.box:hover .down{
				transform: rotateX(-90deg) translateZ(200px);
			}
			
			.box:hover .left{
				transform: rotateY(-90deg) translateZ(200px);
			}
			
			.box:hover .right{
				transform: rotateY(90deg) translateZ(200px);
			}
			
			.box:hover .front{
				transform: translateZ(200px);
			}
			
			.box:hover .back{
				transform: translateZ(-200px);
			}
						
			.box div{
				width:200px;
				height:200px;
				font-size: 60px;
				text-align: center;
				position: absolute;
				line-height: 200px;
				transition: all 3s;
				color:white;
			}
			
			.up{
				background-color: red;
				transform: rotateX(90deg) translateZ(100px);
			}
			
			.down{
				background-color: green;
				transform: rotateX(-90deg) translateZ(100px);
			}
			
			.left{
				background-color: blue;
				transform: rotateY(-90deg) translateZ(100px);
			}
			
			.right{
				background-color: purple;
				transform: rotateY(90deg) translateZ(100px);
			}
			
			.front{
				background-color: orange;
				transform: translateZ(100px);
			}
			
			.back{
				background-color: orange;
				transform: translateZ(-100px);
			}
			
			.heart{
				animation: a 10s infinite;				
			}
			
			@keyframes a{				
				to{transform: rotateY(3600deg);}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div style="color:red" class="heart">❤</div>
			<div class="up">1</div>
			<div class="down">2</div>
			<div class="left">3</div>
			<div class="right">4</div>
			<div class="front">5</div>
			<div class="back">6</div>
		</div>
	</body>
</html>
